From 1b9e624004cfb64135b744f877e5fa87e5810abd Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Tue, 9 Jan 2024 08:53:51 -0500
Subject: Ask the user who they are when opening a group for the first time
 (#7)

---
 src/app/groups/[groupId]/expenses/page.tsx | 80 ++++++++++++++++--------------
 1 file changed, 44 insertions(+), 36 deletions(-)

(limited to 'src/app/groups/[groupId]/expenses/page.tsx')

diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 5285cb8..2a1ac5f 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -1,3 +1,4 @@
+import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
 import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
 import {
@@ -24,45 +25,52 @@ export default async function GroupExpensesPage({
 }: {
   params: { groupId: string }
 }) {
+  const group = await getGroup(groupId)
+  if (!group) notFound()
+
   return (
-    <Card className="mb-4">
-      <div className="flex flex-1">
-        <CardHeader className="flex-1">
-          <CardTitle>Expenses</CardTitle>
-          <CardDescription>
-            Here are the expenses that you created for your group.
-          </CardDescription>
-        </CardHeader>
-        <CardHeader>
-          <Button asChild size="icon">
-            <Link href={`/groups/${groupId}/expenses/create`}>
-              <Plus />
-            </Link>
-          </Button>
-        </CardHeader>
-      </div>
+    <>
+      <Card className="mb-4">
+        <div className="flex flex-1">
+          <CardHeader className="flex-1">
+            <CardTitle>Expenses</CardTitle>
+            <CardDescription>
+              Here are the expenses that you created for your group.
+            </CardDescription>
+          </CardHeader>
+          <CardHeader>
+            <Button asChild size="icon">
+              <Link href={`/groups/${groupId}/expenses/create`}>
+                <Plus />
+              </Link>
+            </Button>
+          </CardHeader>
+        </div>
 
-      <CardContent className="p-0">
-        <Suspense
-          fallback={[0, 1, 2].map((i) => (
-            <div
-              key={i}
-              className="border-t flex justify-between items-center px-6 py-4 text-sm"
-            >
-              <div className="flex flex-col gap-2">
-                <Skeleton className="h-4 w-16 rounded-full" />
-                <Skeleton className="h-4 w-32 rounded-full" />
+        <CardContent className="p-0">
+          <Suspense
+            fallback={[0, 1, 2].map((i) => (
+              <div
+                key={i}
+                className="border-t flex justify-between items-center px-6 py-4 text-sm"
+              >
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                  <Skeleton className="h-4 w-32 rounded-full" />
+                </div>
+                <div>
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </div>
               </div>
-              <div>
-                <Skeleton className="h-4 w-16 rounded-full" />
-              </div>
-            </div>
-          ))}
-        >
-          <Expenses groupId={groupId} />
-        </Suspense>
-      </CardContent>
-    </Card>
+            ))}
+          >
+            <Expenses groupId={groupId} />
+          </Suspense>
+        </CardContent>
+      </Card>
+
+      <ActiveUserModal group={group} />
+    </>
   )
 }
 
-- 
cgit v1.3